<template>
  <div class="banner-wrapper">
    <div class="banner-img" @click="handleImageClick">
      <img src="//img1.qunarzz.com/sight/p0/1501/87/9dcb13572c70d3a2aae83b44121db72b.water.jpg_600x330_bcc57356.jpg" alt=""
             class="banner-img-content" />
      <div class="banner-img-info">
        <div class="banner-img-title">庐山风景名胜区(AAAAA景区)</div>
        <div class="banner-img-number iconfont">&#xe630;&nbsp;33</div>
      </div>
    </div>
    <gallery v-show="isShowGallery" @close-gallery="closeGallery"></gallery>
  </div>
</template>

<script>
  import Gallery from "@/components/gallery/Gallery"
  export default {
    name: "DetailBanner",
    components: {
      Gallery
    },
    data() {
      return {
        isShowGallery: false
      }
    },
    methods: {
      closeGallery() {
        console.log("close gallery");
        this.isShowGallery = false;
      },
      handleImageClick() {
        this.isShowGallery = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .banner-wrapper {
    overflow: hidden;
    padding-bottom: 55%;
    .banner-img {
      position: relative;
      .banner-img-content {
        width: 100%;
      }
      .banner-img-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        color: #ffffff;
        padding: 0 .2rem;
        background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
        .banner-img-title {
          flex: 1;
          line-height: .6rem;
          font-size: .32rem;
        }

        .banner-img-number {
          border-radius: .32rem;
          line-height: .32rem;
          font-size: .24rem;
          background-color: rgba(0, 0, 0, 0.4);
          height: .32rem;
          text-align: center;
          margin-top: .14rem;
          padding: 0 .3rem;
        }
      }
    }
  }

</style>